<!DOCTYPE html>
<html>
<head>
	<title>聚合码修改</title>
	<!--#include("../../common/common-link.html"){}-->
	<script src="${ctx}/assets/js/qrcode.min.js"></script>
	<style type="text/css">
		.table-panel .content table{margin: 0 auto;margin-top: 10px;}
		.table-panel .content table tr{height: 49px;}
		.table-panel .content table tr.btns td .btn{width: 123px;outline: none;margin-top:20px;}
		.table-panel .content table tr td .need{color: red;}
		.table-panel .content table tr td.left{text-align: right;}
		.table-panel .content table tr td.right{text-align: left;}
		.table-panel .content table tr td.right .form-control{width:330px;}
		.table-panel .content table tr td.center{text-align: center;}
	</style>
</head>
<body>
	<div id="container-wrap" style="display:none;">
		<div class="table-panel">
			<div class="header">
				<h4 class="title">聚合码修改</h4>
				<div class="btns-group">
					<input type="button" class="btn button" onclick="javascript:window.history.back()" value="返回"/>
				</div>
			</div>
			<div class="content">
				<table>
					<tr>
						<td class="left">别名：</td>
						<td class="right">
							<input class="form-control" :value="form.alias" v-model="form.alias">
						</td>
					</tr>
					<tr>
						<td class="left">状态：</td>
						<td class="right">
							<div class="layui-form" v-if="form.status">
								<div id="switch" class="layui-unselect layui-form-switch layui-form-onswitch" lay-skin="_switch"><em>可用</em><i></i></div>
							</div>
							<div class="layui-form" v-else>
								<div id="switch" class="layui-unselect layui-form-switch" lay-skin="_switch"><em>不可用</em><i></i></div>
							</div>
						</td>
					</tr>
					<tr>
						<td class="left" valign="top">二维码：</td>
						<td class="right" valign="top">
							<div class="qr-code"></div>
						</td>
					</tr>
					<tr class="btns">
						<td class="center" colspan="2">
							<button type="button" class="btn button ok_btn" @click="submit">提交</button>
							<button type="button" class="btn button cancel_btn" @click="cancel">取消</button>
						</td>
					</tr>
				</table>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript">
	var pageData = {};
	var form={};
	function initVue() {
		pageData.form=form;
		new Vue({
			el:"#container-wrap",
			data:pageData
		});
		Vue.nextTick(function() {
			bindEvent();
			$("#container-wrap").show();
		});
	};
	function request(callback){
		var id=util.getParameter("id");
		var load_id = util.load();
		util.post({
			url:"getPaycode",
			data:{id:id},
			success : function(result) {
				form.id=id;
				form.alias=result.alias;
				form.status=result.status;
				Vue.nextTick(function() {
					encodeQrcode(form.value);
				});
			},
			complete : function() {
				layer.close(load_id);
			}
		},callback);
	};
	function bindEvent(){
		$("#switch").click(processStatus);
	};
	function processStatus(){
		if(form.status){
			form.status=0;
		}else{
			form.status=1;
		}
		Vue.nextTick(function() {
			$("#switch").click(processStatus);
		});
	};
	function encodeQrcode(url){
		var $qrimg = $(".qr-code");
		$qrimg.html("").qrcode({
			text: url,
			size: 128
		});
	};
	function submit(){
		if($.trim(form.alias)==''){
			util.warning("请填写别名！");
			return ;
		}
		var load_id = util.load();
		util.post({
			url:"modifyPaycode",
			data:form,
			success : function(result) {
				cancel();
			},
			complete : function() {
				layer.close(load_id);
			}
		});
	}
	function cancel(){
		window.history.back();
	};
	function initialize(){
		request(initVue);
	}
</script>
</html>